<template>
	<view class="pjlist">
		<view v-if="listStyle == 1" :class="[`item_${listStyle}`]" v-for="(item, i) in list" :key="i" @click="handleItem(item)">
			<view class="userbox">
				<!-- <image :src="item.touxiang" mode=""></image> -->
				<u-avatar :src="item.touxiang" size="56rpx"></u-avatar>
				<view class="info">
					<text>{{ item.username }}</text>
					<text>{{ item.dtTime }}</text>
				</view>
			</view>
			<view class="content">
				<text user-select>{{ item.content }}</text>
				<view class="xcbox">
					<u-album v-if="item.imgs" rowCount="4" :maxCount="4" multipleSize="145rpx" :urls="item.imgs"></u-album>
				</view>
				<view class="ggbox">
					<text>{{ item.key_vals || '' }}</text>
				</view>
			</view>
		</view>

		<view v-if="listStyle == 2" :class="[`item_${listStyle}`]" v-for="(item, i) in list" :key="i" @click="handleItem(item)">
			<view class="userbox">
				<view class="user">
					<!-- <image :src="item.touxiang" mode=""></image> -->
					<u-avatar :src="item.touxiang" size="56rpx"></u-avatar>
					<text>{{ item.username }}</text>
				</view>
				<view class="info">
					<text>{{ item.dtTime }}</text>
				</view>
			</view>
			<view class="ggbox">
				<text v-if="item.key_vals">{{ item.key_vals || '' }}</text>
				<u-rate :count="5" v-model="item.star" readonly></u-rate>
			</view>
			<view class="content">
				<text>{{ item.content }}</text>
				<view class="xcbox">
					<u-album v-if="item.imgs" :urls="item.imgs" singleSize="" multipleSize="204rpx" maxCount="6"></u-album>
				</view>
			</view>
			<view v-if="goods" class="goods-box" @click="toNav(`goods/goodsDetail?id=${item.inventory_id}`)">
				<!-- <image :src="item.guige_img" mode="aspectFill"></image> -->
				<u--image :showLoading="true" :src="item.guige_img" width="124rpx" height="124rpx"></u--image>
				<view class="info">
					<text class="info-title">{{ item.title }}</text>
					<text class="info-key">{{ item.key_vals }}</text>
					<text class="info-price" v-if="item.price_sale">￥{{ item.price_sale }}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'pjlist',
	props: {
		listStyle: {
			type: String | Number,
			default: '1'
		},
		goods: {
			type: Boolean,
			default: false
		},
		list: {
			type: Array | Number,
			default: () => {
				return [];
			}
		}
	},
	data() {
		return {};
	},
	methods: {
		handleItem(item) {
			this.$emit('handleItem', item);
		}
	}
};
</script>

<style lang="less" scoped>
.pjlist {
	.ggbox {
		display: flex;
		align-items: center;
		margin-top: 16rpx;
		text {
			margin-right: 24rpx;
			font-size: 24rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #9695a3;
		}
	}
	.item_2 + .item_2 {
		margin-top: 16rpx;
	}
	.item_2 {
		padding: 40rpx 24rpx;
		background: #ffffff;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		.goods-box {
			display: flex;
			width: 100%;
			height: 124rpx;
			margin-top: 28rpx;
			background: #f4f6f8;
			image {
			// .bor();
				width: 124rpx;
				height: 124rpx;
				background: #dfdfdf;
				border-radius: 8rpx 0rpx 0rpx 8rpx;
			}
			.info {
				flex: 1;
				padding-left: 24rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-evenly;
				border-left: 1px solid #eee;
				// .bor();
				.info-title {
					font-size: 26rpx;
					font-size: 24rpx;
					font-family: PingFang SC-Bold, PingFang SC;
					font-weight: bold;
					color: #000000;
				}
				.info-key {
					font-size: 20rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #999999;
				}
				.info-price {
					font-size: 20rpx;
					font-family: PingFang SC-Bold, PingFang SC;
					font-weight: bold;
					color: #000000;
				}
			}
		}
		.content {
			margin-top: 16rpx;
			& > text {
				font-size: 28rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #000000;
			}
			.xcbox {
				margin-top: 16rpx;
			}
		}
		.userbox {
			.flex-between();
			.user {
				display: flex;
				align-items: center;
				& > image {
					width: 56rpx;
					height: 56rpx;
					border-radius: 50%;
					background: #f5f5f5;
				}
				& > text {
					margin-left: 24rpx;
					font-size: 28rpx;
					font-family: PingFang SC-Bold, PingFang SC;
					font-weight: bold;
					color: #000000;
				}
			}
			.info {
				text {
					font-size: 24rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #9695a3;
				}
			}
			// .info {
			// 	flex: 1;
			// 	display: flex;
			// 	flex-direction: column;
			// 	justify-content: space-between;
			// 	margin-left: 24rpx;
			// 	text:nth-of-type(1) {
			// 		font-size: 24rpx;
			// 		font-family: PingFang SC-Bold, PingFang SC;
			// 		font-weight: bold;
			// 		color: #000000;
			// 	}
			// 	text:nth-of-type(2) {
			// 		font-size: 20rpx;
			// 		font-family: PingFang SC-Regular, PingFang SC;
			// 		font-weight: 400;
			// 		color: #666666;
			// 	}
			// }
		}
	}
	.item_1 + .item_1 {
		border-top: 1px solid #f3f4f8;
	}
	.item_1 {
		padding: 40rpx 0;
		.content {
			margin-top: 26rpx;
			& > text {
				font-size: 28rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #000000;
			}
			.xcbox {
				margin-top: 16rpx;
			}
		}
		.userbox {
			display: flex;
			align-items: center;
			& > image {
				width: 56rpx;
				height: 56rpx;
				border-radius: 50%;
				background: #f5f5f5;
			}
			.info {
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				margin-left: 24rpx;
				text:nth-of-type(1) {
					font-size: 24rpx;
					font-family: PingFang SC-Bold, PingFang SC;
					font-weight: bold;
					color: #000000;
				}
				text:nth-of-type(2) {
					font-size: 20rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #666666;
				}
			}
		}
	}
}
</style>
